import { IndexBar, Tabs, Cell } from "react-vant";
import { pinyin } from "pinyin-pro";
import cityMask from "../utils/index";
import { useEffect, useState } from "react";

export default function CityMask(props) {
  const { changeCity, show } = props;
  const [city, setCity] = useState("");
  const indexList = [];
  const customIndexList = [1, 2, 3, 4, 5, 6, 8, 9, 10];
  const charCodeOfA = "A".charCodeAt(0);
// 26个英文字母
  for (let i = 0; i < 26; i += 1) {
    indexList.push(String.fromCharCode(charCodeOfA + i));
  }
  useEffect(() => {
    // /*通过百度地图获取当前位置城市信息*//*获取用户当前位置（ip定位）*/
    var BMap = window.BMap; //取出window中的BMap对象
    var myCity = new BMap.LocalCity();
    myCity.get(function (result) {
      setCity(result.name);
    });
  }, []);
  return (
    <div className={show ? "city_mask" : "city_mask1"}>
      <nav>
        <p>
          <span>&lt;</span>
          <span>选择城市</span>
          <span></span>
        </p>
        <div>
          当前城市：
          <span>{city}</span>
        </div>
      </nav>
      <main>
        <IndexBar sticky={false}>
          {indexList.map((item) => (
            <div key={item}>
              <IndexBar.Anchor index={item} />
              {cityMask
                .filter((v) => v.pinyin == item)
                .map((val, i) => {
                  return (
                    <Cell
                      title={val.text}
                      onClick={() => changeCity(val.text)}
                      key={i}
                    />
                  );
                })}
            </div>
          ))}
        </IndexBar>
      </main>
    </div>
  );
}
